<template>
	<view class="approval-form-group">
		<view class="">
			<text class="title">{{title}}</text>
			<text class="text-gray text-sm flex">{{subtitle}}</text>
		</view>
		<view class="approval-group">
			<image @click="addEvent" v-show="isShowAdd" mode="aspectFill" class="cu-avatar round bg-white" src="../../static/icon_increase_blue.png">
			</image>
			<view class="cu-avatar round margin-left" v-for="(item,index) in options" :key="index" :style="[{ backgroundImage:'url(' + ($constant.IMG_VERSION == $constant.OSS?item.img:$constant.BASEURL+item.img) + ')'}]">
				<view @tap.stop="delItem(item,index)" class="cu-tag badge cuIcon-close bg-black"></view>
				<text class="text-gray text-sm" style="margin-top: 108upx;">{{item.name}}</text>
			</view>
		</view>
	</view>
	</view>	
</template>

<script>
	export default {
		name: 'approval',
		props: {
			title: {
				type: String,
				default: '标题'
			},
			subtitle: {
				type: String,
				default: '副标题'
			},
			describe:{
				type:String,
				default:'姓名'
			},
			options: {
				type: Array,
				default () {
					return []
				}
			},
			isShowAdd: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			addEvent() {
				this.$emit('addEvent')
			},
			delItem(item, index) {
				let data = {
					index: index,
					value: item
				}
				this.$emit('delete', data)
			}
		}
	}
</script>

<style>
	.approval-form-group {
		background-color: #ffffff;
		padding: 1upx 30upx;
		display: flex;
		align-items: center;
		min-height: 180upx;
		justify-content: space-between;
	}

	.approval-form-group+.approval-form-group {
		border-top: 1upx solid #eee;
	}

	.approval-form-group .title {
		text-align: justify;
		padding-right: 30upx;
		font-size: 30upx;
		position: relative;
		height: 60upx;
		line-height: 60upx;
	}

	.approval-group {
		direction: rtl;
		unicode-bidi: bidi-override;
		padding: 0 10upx 0 40upx;
		display: inline-block;
	}

	.approval-group .cu-avatar {
		/* margin-left: -30upx; */
		/* border: 4upx solid #f1f1f1; */
		margin: 0 10upx 0 10upx;
		vertical-align: middle;
	}

	.approval-group .cu-avatar.sm {
		margin-left: -20upx;
		border: 1upx solid #f1f1f1;
	}

	.bg-black {
		background-color: #333333;
	}
</style>
